<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>正版专辑-正规引进</title>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/detail.css"/>
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	$(function(){
    		var val=$("#count-ipt").val()
    		var count=$(".in-count").text()
    		$(".c_sub").click(function(){
    			if(val>0)
    			val--;
    			$("#count-ipt").val(val)
    		})
    		$(".c_sub").click(function(){
    			if(val<0)
    			val++;
    			$("#count-ipt").val(val)
    		})
    		$(".mask").hover(function(){
    			$(".float_layer").show();
    			$(".big_box").show();
    			
    		},function(){
    			$(".float_layer").hide();
    			$(".big_box").hide();
    		})
    		$(".mask").mousemove(function(e){
    			var left=e.offsetX-100;
    			var top=e.offsetY-100;
    			var w=$(this).width();
    			var h=$(this).height();
    			if (top<0) {
    				top=0
    			}
    			if (left<0) {
    				left=0
    			}
    			console.log(e.offsetX,w)
    			if (e.offsetX+100>=w) {
    				left=w-200;
    			}
    			if (e.offsetX+100>=h) {
    				top=h-200;
    			}
    			$(".float_layer").css({
    				left:left+"px",
    				top:top+"px"
    			})
    			$(".big_box img").css({
    				left:-2*left+"px",
    				top:-2*top+"px"
    			})
    		})
    		
    	})
    </script>
</head>

<body>
<!-- header -->
<div class="header">
    <!-- head-top -->
    <div class="head-top">
        <div class="yinyue-container">
            <div class="yin-logo">
                <a href="index.html"><img src="img/logo/yinLogo.png"/></a>
            </div>

            <div class="top-menu">
                <div class="sina">
                    <p>官方微博</p>
                    <div class="popsina">
                        <img src="img/weibo.png" alt="">
                        <p class="scan">扫一扫</p>
                    </div>
                </div>
                <span class="split-line">|</span>
                <div class="wechat">
                    <p>关注微信</p>
                    <div class="popwechat">
                        <img src="img/weixin.jpg" alt="">
                        <p class="scan">扫一扫</p>
                    </div>
                </div>
                <span class="split-line">|</span>
                <a class="zhengpin" href="buyer-reading.html">购物须知</a>
            </div>
        </div>
    </div>
    <!-- head-top End -->

    <!-- head-main -->
    <div class="head-main">
        <div class="yinyue-container">
            <a class="shop-logo" href="index.html"><img src="img/logo/shop-logo-v1.png"/></a>
            <div class="shop-search">
                <input type="text" placeholder="搜索偶像、商品">
                <a class="search-btn" href="javascript:void(0);"></a>
            </div>
            <div class="user-box">
                <a href="login.html" class="shop-loginBtn">登录</a>
                <a href="javascript:void(0)" class="my-order">我的订单</a>
                <a href="#" class="my-cart" target="_blank">购物车</a>
            </div>
        </div>
    </div>
    <!-- head-main End-->
    <!-- head-nav -->
    <div class="head-nav yinyue-container clearfix">
        <div class="nave-type">
            <a href="#">艺人分类</a>
        </div>
        <ul class="nav-box">
            <li><a href="index.html">首页</a></li>
            <li class="active"><a href="album-list.html">专辑</a></li>
            <li><a href="#">明星周边</a></li>
            <li><a href="#">明星同款</a></li>
            <li><a href="#">个护美妆</a></li>
            <li><a href="#">影漫周边</a></li>
            <li><a href="#">食品</a></li>
            <li><a href="#">服装配饰</a></li>
        </ul>
    </div>
    <!-- head-nav End-->
</div>
<!-- header End -->
<!-- album-details 专辑详情页 -->
<div class="album-details">
    <!-- breadcrumb-nav 面包屑导航 End -->
    <div class="breadcrumb-nav">
        <a href="index.html" target="_blank">首页&nbsp;&gt;&nbsp;</a>
        <a href="album-list.html" target="_blank">专辑&nbsp;&gt;&nbsp;</a>
        <span>【独家发售】大张伟2018全新专辑《人间精品》</span>
    </div>
    <!-- breadcrumb-nav 面包屑导航 End -->
    <!-- album-details-main 专辑介绍主内容 -->
    <div class="album-details-main clearfix mb20">
        <!--details-left-->
        <div class="details-left fl">
            <!--<div class="pics-box">
                <img src="img/pro/7_418x418.jpg"/>
            </div>-->
            <div class="pics-box">
                <div class="small_box">
                    <span class="mask"></span>
                    <span class="float_layer"></span>
                    <img src="img/pro/7_418x418.jpg">
                </div>
                <div class="big_box">
                    <img src="img/pro/7_800x800.jpg">
                </div>
            </div>
            <div class="like">
                <span class="like-icon"></span>
                <i class="like-num">0</i>
            </div>
            <div class="pic-slide">
                <img src="img/details-i.png"/>
            </div>
        </div>
        <!--details-left End-->
        <!--details-right-->
        <div class="details-right fl">
            <h2 class="album-name mb20">【独家发售】大张伟2018全新专辑《人间精品》</h2>
            <ul class="album-info-li">
                <li><span class="li-name">商城价格</span><strong class="li-price">83.1元</strong>
                    <del class="original-price">83.1元</del>
                </li>
                <li><span class="li-name">重量</span><span class="li-info">0.33kg</span></li>
                <!--<li><span class="li-name">数量</span><span class="li-info"><img src="img/num.jpg"/></span></li>-->
                <li class="count">
                    <span class="li-name">数量</span>
                    <a href="javascript:void(0);" class="c_sub"> - </a><input id="count-ipt" type="text" value="1"><a href="javascript:void(0);" class="c_add"> + </a>
                    <span class="inventory">库存<i class="in-count">5</i>件</span>
                </li>
            </ul>
            <div class="details-btn-box">
                <div class="btns mb20">
                    <button class="add-cart"></button>
                    <button class="buy-now"></button>
                </div>
                <div><img src="img/zpbz.png"/></div>

            </div>
        </div>
        <!--details-right End-->
    </div>
    <!-- album-details-main 专辑介绍主内容 End-->
    <!-- tuangou 广告图 -->
    <div class="tuangou">
        <img src="img/tuangou20180126.jpg"/>
    </div>
    <!-- tuangou 广告图 End-->
</div>
<!-- album-details 专辑详情页 End -->
<!-- footer -->
<div class="footer">
    <!--footer-service-->
    <div class="footer-service">
        <img src="img/footer_v180123.png"/>
    </div>
    <!--footer-service End-->
    <!--footer-link-->
    <div class="footer-link">
        <a href="#" target="_blank" title="关于我们">关于我们</a>
        <span class="ico_line"></span>
        <a href="#" target="_blank" title="人才招聘">人才招聘</a>
        <span class="ico_line"></span>
        <a href="#" target="_blank" title="联系我们">联系我们</a>
        <span class="ico_line"></span>
        <a href="#" target="_blank" title="友情链接">友情链接</a>
        <span class="ico_line"></span>
        <a href="#" target="_blank" title="版权声明">版权声明</a>
        <span class="ico_line"></span>
        <a href="#" target="_blank" title="客服中心">客服中心</a>
    </div>
    <!--footer-link End-->
    <!--footer-copy-->
    <div class="footer-copy">
        <a href="#" target="_blank" class="culture"><img src="img/culture.png"></a>
        Copyright © 2009 - 2016 yinyuetai.com 广播电视节目制作经营 许可证编号(京)字第1891号 |
        <a href="#" target="_blank">京网文[2014]2037-287号</a>
        |
        <a href="#" title="网络视听许可证0110413号">网络视听许可证0110413号</a><br>
        <a class="police-store" href="#">京公网安备11010502014900号</a>
        | 京ICP备11024134号-1 | 京ICP证060716号 | 出版物经营许可证 新出发京零字第朝130062号 | 增值电信业务经营许可证B2-20140501
        <a href="#" target="_blank" class="biaoshi"><img src="img/biaoshi.gif"></a>
    </div>
    <!--footer-copy End-->
    <div>
        <p>食品经营许可s证:JY11105040485363 |
            <a href="#" target="_blank">营业执照</a>
        </p>
    </div>
</div>
<!-- footer End -->
</body>

</html>